/* eslint-disable */
<template>
  <!-- 学生主页容器 -->
  <div class="dashboard-container">
    <!-- 欢迎信息区域：显示问候语、用户名、日期和励志语录 -->
    <div class="welcome-section">
      <h2>{{ greeting }}，{{ userInfo.name || '同学' }}</h2>
      <p class="subtitle">今天是 {{ currentDate }}，{{ motivationalQuote }}</p>
    </div>

    <!-- 课程导航区域：包含三个标签页 -->
    <div class="nav-section">
          <!-- 课程卡片列表：使用el-row和el-col实现网格布局 -->
          <div v-loading="loading">
            <el-row :gutter="20" v-if="courses.length > 0">
              <!-- 循环渲染课程卡片，每行4个 -->
              <el-col :span="6" v-for="(course, index) in courses" :key="course.courseId || index">
                <!-- 单个课程卡片：包含课程封面、信息和统计 -->
                <el-card class="course-card" shadow="hover" @click.native="goCourseDetail(course)">
                  <!-- 课程封面图片：使用require动态加载图片 -->
                  <div class="course-cover">
                    <img :src="getCourseImage(course.courseId)" :alt="course.courseName">
                  </div>
                  <!-- 课程信息区域：显示课程名称、班级和时间 -->
                  <div class="course-info">
                    <h3>{{ course.courseName || '未命名课程' }}</h3>
                    <p class="course-class">{{ course.className || '未分配班级' }}</p>
                    <p class="course-time">{{ course.term || '未设置学期' }}</p>
                    <!-- 课程统计信息：显示教师和状态 -->
                    <div class="course-stats">
                      <el-tooltip content="授课教师" placement="top">
                        <span><i class="el-icon-user"></i> {{ course.teacherName || '未知教师' }}</span>
                      </el-tooltip>
                      <el-tooltip content="课程状态" placement="top">
                        <span>
                          <i class="el-icon-data-line"></i> 
                          <el-tag size="mini" :type="getStatusType(course.status || '未开始')">{{ course.status || '未开始' }}</el-tag>
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-empty v-else description="暂无课程数据"></el-empty>
          </div>
    </div>

    <!-- 加入课程对话框：用于输入课程码 -->
    <el-dialog title="加入课程" :visible.sync="joinDialog.visible" width="30%">
      <!-- 加入课程表单：使用el-form组件 -->
      <el-form :model="joinForm" :rules="joinRules" ref="joinForm" label-width="80px">
        <el-form-item label="课程码" prop="code">
          <el-input v-model="joinForm.code" placeholder="请输入课程码"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="joinDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleJoinCourse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getStudentCourses } from '@/api/student'
import { mapGetters } from 'vuex'

export default {
  name: 'StudentDashboard',
  data() {
    return {
      // 从本地存储获取用户信息
      userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
      // 课程列表数据
      courses: [],
      // 加载状态
      loading: false,
      // 课程背景图片映射，修改为只包含存在的图片
      courseImages: [
        '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'
      ],
      // 加入课程对话框数据
      joinDialog: {
        visible: false
      },
      // 加入课程表单数据
      joinForm: {
        code: ''
      },
      // 表单验证规则
      joinRules: {
        code: [
          { required: true, message: '请输入课程码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    // 根据当前时间返回问候语
    greeting() {
      const hour = new Date().getHours()
      if (hour < 6) return '凌晨好'
      if (hour < 9) return '早上好'
      if (hour < 12) return '上午好'
      if (hour < 14) return '中午好'
      if (hour < 17) return '下午好'
      if (hour < 19) return '傍晚好'
      return '晚上好'
    },
    // 获取当前日期，格式化为中文格式
    currentDate() {
      const date = new Date()
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    },
    // 随机返回一条励志语录
    motivationalQuote() {
      const quotes = [
        '学习使我快乐',
        '知识就是力量',
        '学而不思则罔，思而不学则殆',
        '业精于勤，荒于嬉'
      ]
      return quotes[Math.floor(Math.random() * quotes.length)]
    },
    // 获取学生ID
    studentId() {
      return this.userInfo.studentId || localStorage.getItem('studentId')
    }
  },
  created() {
    // 页面创建时加载课程数据
    this.fetchCourses()
  },
  methods: {
    // 获取课程封面图片
    getCourseImage(courseId) {
      try {
        // 使用课程ID的哈希值来选择图片，确保同一课程总是显示相同的图片
        const hash = this.hashCode(courseId)
        const index = Math.abs(hash) % this.courseImages.length
        return require('@/assets/' + this.courseImages[index])
      } catch (error) {
        console.error('加载课程图片失败:', error)
        // 返回一个默认图片或空字符串
        return require('@/assets/1.jpg') // 使用一个确定存在的图片作为后备
      }
    },
    
    // 简单的字符串哈希函数
    hashCode(str) {
      let hash = 0
      for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i)
        hash = ((hash << 5) - hash) + char
        hash = hash & hash // Convert to 32bit integer
      }
      return hash
    },
    
    // 获取状态类型
    getStatusType(status) {
      const types = {
        '进行中': 'success',
        '未开始': 'info',
        '已结束': 'danger'
      }
      return types[status] || 'primary'
    },
    
    // 跳转到课程详情页
    goCourseDetail(course) {
      this.$router.push({
        path: `/student/course/${course.courseId}`,
        query: {
          classId: course.classId
        }
      })
    },
    
    // 从API获取课程数据
    fetchCourses() {
      if (!this.studentId) {
        this.$message.error('未获取到学生ID，请重新登录')
        console.error('学生ID为空:', this.userInfo)
        return
      }
      
      this.loading = true
      console.log('正在获取学生课程，学生ID:', this.studentId)
      
      getStudentCourses(this.studentId)
        .then(response => {
          console.log('获取课程响应:', response)
          if (response.code === 200) {
            const coursesData = response.data || []
            console.log('课程数据:', coursesData)
            
            if (Array.isArray(coursesData)) {
              this.courses = coursesData
            } else {
              console.error('课程数据不是数组:', coursesData)
              this.courses = []
              this.$message.error('课程数据格式有误')
            }
          } else {
            this.$message.error(response.message || '获取课程列表失败')
            console.error('获取课程失败:', response)
            this.courses = []
          }
        })
        .catch(error => {
          console.error('获取课程列表失败:', error)
          this.$message.error('获取课程列表失败，请稍后重试')
          this.courses = []
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 显示加入课程对话框
    showJoinCourseDialog() {
      this.joinForm.code = ''
      this.joinDialog.visible = true
    },
    // 处理加入课程表单提交
    handleJoinCourse() {
      this.$refs.joinForm.validate(valid => {
        if (valid) {
          // TODO: 调用加入课程接口
          this.$message.success('加入课程成功')
          this.joinDialog.visible = false
        }
      })
    }
  }
}
</script>

<style scoped>
/* 仪表盘容器样式：设置内边距和背景色 */
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

/* 欢迎区域样式：设置卡片样式和阴影效果 */
.welcome-section {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

/* 欢迎标题样式 */
.welcome-section h2 {
  margin: 0;
  color: #303133;
}

/* 副标题样式 */
.subtitle {
  margin: 10px 0 0;
  color: #909399;
}

/* 导航区域样式：设置卡片样式和阴影效果 */
.nav-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

/* 课程卡片样式：设置悬停效果和过渡动画 */
.course-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

/* 课程卡片悬停效果 */
.course-card:hover {
  transform: translateY(-5px);
}

/* 课程封面样式：设置图片容器和溢出处理 */
.course-cover {
  height: 160px;
  overflow: hidden;
  border-radius: 4px;
}

/* 课程封面图片样式：设置图片填充方式 */
.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 课程信息样式：设置内边距和文字样式 */
.course-info {
  padding: 15px 0;
}

/* 课程标题样式 */
.course-info h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 课程信息文本样式 */
.course-info p {
  margin: 5px 0;
  font-size: 13px;
  color: #909399;
}

/* 课程统计信息样式：设置图标和文字布局 */
.course-stats {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  color: #606266;
  font-size: 13px;
}

/* 统计项样式：设置图标和文字对齐 */
.course-stats span {
  display: flex;
  align-items: center;
}

/* 统计图标样式 */
.course-stats i {
  margin-right: 4px;
}
</style> 